<template>
    <div class="order-audit-list">
      <h2>订单审核列表</h2>
      <el-button @click="goBackHome">返回首页</el-button>
  
      <div class="custom-table">
        <table>
          <thead>
            <tr>
              <th>订单ID</th>
              <th>订单名称</th>
              <th>订单价格</th>
              <th>订单状态</th>
              <th>联系电话</th>
              <th>收货地址</th>
              <th>省份</th>
              <th>商品列表</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in currentPageOrders" :key="order.order_id">
              <td>{{ order.order_id }}</td>
              <td>{{ order.order_name }}</td>
              <td>{{ order.order_price }}</td>
              <td>
                <el-tag :type="getStatusType(order.order_status)" effect="dark">
                  {{ getStatusText(order.order_status) }}
                </el-tag>
              </td>
              <td>{{ order.order_phone }}</td>
              <td>{{ order.order_address }}</td>
              <td>{{ order.order_province }}</td>
              <td>
                <el-tag
                  v-for="goods in order.bs_order_goods"
                  :key="goods.id"
                  style="margin-right: 5px"
                >
                  {{ goods.goods_name }} (x{{ goods.goods_num }})
                </el-tag>
              </td>
              <td>
                <el-button type="primary" size="small" @click="editOrder(order.order_id)">去审核</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredOrders.length"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        orders: [],
        loading: true,
        statusOptions: [
          { value: null, label: '全部' },
          { value: 7, label: '未付款' },
          { value: 1, label: '支付待审核' },
          { value: 2, label: '待发货' },
          { value: 3, label: '已发货' },
          { value: 4, label: '已签收' },
          { value: 5, label: '退货审核' },
          { value: 6, label: '已退货' }
        ],
        selectedStatus: 1, // 只显示支付待审核的订单
        currentPage: 1,
        pageSize: 10
      };
    },
    created() {
      this.fetchOrders();
    },
    computed: {
      filteredOrders() {
        return this.orders.filter(order => {
          return order.order_status === this.selectedStatus;
        });
      },
      currentPageOrders() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.filteredOrders.slice(start, end);
      }
    },
    methods: {
      fetchOrders() {
        this.loading = true;
        axios.get('http://127.0.0.1:3005/order/getOrders')
          .then(response => {
            if (response.data && response.data.res && response.data.res.result) {
              this.orders = response.data.res.result;
            } else {
              this.$message.error('订单数据格式错误');
            }
            this.loading = false;
          })
          .catch(error => {
            console.error(error);
            this.$message.error('订单查询失败');
            this.loading = false;
          });
      },
      approveOrder(id) {
        this.$confirm('确定通过此订单的审核吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.put(`http://127.0.0.1:3005/order/${id}/approve`)
            .then(() => {
              this.$message.success('订单审核通过');
              this.fetchOrders();
            })
            .catch(error => {
              console.error(error);
              this.$message.error('订单审核失败');
            });
        });
      },
      rejectOrder(id) {
        this.$confirm('确定拒绝此订单的审核吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.put(`http://127.0.0.1:3005/order/${id}/reject`)
            .then(() => {
              this.$message.success('订单审核拒绝');
              this.fetchOrders();
            })
            .catch(error => {
              console.error(error);
              this.$message.error('订单审核失败');
            });
        });
      },
      goBackHome() {
        this.$router.push('/home');
      },
      getStatusText(status) {
        const statusMap = {
          7: '未付款',
          1: '支付待审核',
          2: '待发货',
          3: '已发货',
          4: '已签收',
          5: '退货审核',
          6: '已退货'
        };
        return statusMap[status] || '未知状态';
      },
      getStatusType(status) {
        const typeMap = {
          1: 'warning',
          2: 'warning',
          3: 'primary',
          4: 'success',
          5: 'primary',
          6: 'info',
          7: 'danger'
        };
  
        return typeMap[status] || 'info';
      },
      handleSizeChange(newSize) {
        this.pageSize = newSize;
        this.currentPage = 1;
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
      }
      ,
      editOrder(id) {
      this.$router.push(`/ReviewOrder/${id}`);
    }
    }
  };
  </script>
  
  <style scoped>
  .order-audit-list {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--el-bg-color);
    border-radius: 8px;
    box-shadow: var(--el-box-shadow-light);
  }
  
  h2 {
    color: var(--el-text-color-primary);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--el-border-color-light);
    display: flex;
    align-items: center;
  }
  
  h2::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--el-color-primary);
    margin-right: 12px;
    border-radius: 2px;
  }
  
  .custom-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
  }
  
  .custom-table table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .custom-table th,
  .custom-table td {
    padding: 12px;
    border: 1px solid var(--el-border-color-light);
    text-align: left;
  }
  
  .custom-table th {
    background-color: var(--el-fill-color-light);
    font-weight: 600;
  }
  
  .custom-table tr:nth-child(even) {
    background-color: var(--el-fill-color-lighter);
  }
  
  .custom-table tr:hover {
    background-color: var(--el-fill-color-light);
  }
  
  @media (max-width: 768px) {
    .custom-table {
      overflow-x: auto;
    }
  
    .custom-table th,
    .custom-table td {
      white-space: nowrap;
    }
  }
  </style>